<template>
  <view class="container">
    <view class="form-card">
      <text class="form-title">注册</text>

      <!-- 用户名 -->
      <input 
        v-model="form.username" 
        class="input-field" 
        placeholder="请输入用户名" 
      />

      <!-- 密码 -->
      <input 
        v-model="form.password" 
        type="password" 
        class="input-field" 
        placeholder="请输入密码（不少于6位）" 
      />

      <!-- 确认密码 -->
      <input 
        v-model="form.confirmPwd" 
        type="password" 
        class="input-field" 
        placeholder="请确认密码" 
      />

      <!-- 新增：昵称 -->
      <input 
        v-model="form.nickname" 
        class="input-field" 
        placeholder="请输入昵称" 
      />

      <!-- 新增：手机号 -->
      <input 
        v-model="form.mobile" 
        type="number" 
        class="input-field" 
        placeholder="请输入手机号" 
      />

      <!-- 新增：Email -->
      <input 
        v-model="form.email" 
        class="input-field" 
        placeholder="请输入Email" 
      />

      <button 
        class="action-btn" 
        type="primary" 
        @click="handleRegister"
        :disabled="isSubmitting"
      >{{ isSubmitting ? '注册中...' : '注册' }}</button>

      <view class="link-area">
        <text>已有账号？</text>
        <navigator url="/pages/login/login">去登录</navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 改为form对象，整合所有字段
      form: {
        username: '',
        password: '',
        confirmPwd: '',
        nickname: '',
        mobile: '',
        email: ''
      },
      isSubmitting: false 
    };
  },
  methods: {
    handleRegister() {
      // 基础校验
      if (!this.form.username || !this.form.password || !this.form.confirmPwd) {
        uni.showToast({ title: '请输入用户名、密码及确认密码', icon: 'none' });
        return;
      }
      if (this.form.password.length < 6) {
        uni.showToast({ title: '密码不少于6位', icon: 'none' });
        return;
      }
      if (this.form.password !== this.form.confirmPwd) {
        uni.showToast({ title: '密码不一致', icon: 'none' });
        return;
      }

      this.isSubmitting = true;
      uni.showLoading({ title: '注册中...' });

      // 调用云函数（传递所有字段）
      uniCloud.callFunction({
        name: 'addUser',
        data: {
          name: this.form.username,
          password: this.form.password,
          nickname: this.form.nickname,
          mobile: this.form.mobile,
          email: this.form.email
        },
        success: (msg) => {
          console.log("addUser callback " + JSON.stringify(msg));
          uni.hideLoading();
          uni.showToast({ title: "注册成功" });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        },
        fail: (error) => {
          console.error("addUser fail " + error);
          uni.hideLoading();
          uni.showToast({ 
            title: '连接数据库失败：' + error.message, 
            icon: 'none' 
          });
        },
        complete: () => {
          this.isSubmitting = false;
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20rpx;
  box-sizing: border-box;
}
.form-card {
  width: 80%;
  max-width: 400px;
  background-color: #fff;
  padding: 40rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
}
.input-field {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}
.action-btn {
  width: 100%;
  height: 80rpx;
  border-radius: 8rpx;
  font-size: 30rpx;
}
.action-btn[disabled] {
  background-color: #999 !important;
  color: #fff !important;
}
.link-area {
  margin-top: 20rpx;
  font-size: 26rpx;
  color: #666;
}
.link-area navigator {
  color: #007AFF;
  text-decoration: none;
  margin-left: 8rpx;
}
</style>